<!--
 * @Author: 小陆同学 1361176289@qq.com
 * @Date: 2024-08-11 18:16:44
 * @LastEditors: 小陆同学 1361176289@qq.com
 * @LastEditTime: 2024-08-15 12:37:49
 * @FilePath: \和和送货单打印\src\components\prTooth\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="tooth" :style="style">
		<div class="tooth-row">
			<div class="cell cell1">
				<div class="tooth-item end">
					<!-- <div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['upper-left']" :key="item.id">{{ item.displayId }}</div> -->
					<!-- 如果有值 赋值 没有 写个div占位 -->
					<template v-if="sections['upper-left'].length">
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['upper-left']" :key="item.id">{{ item.displayId }}</div>
					</template>
					<!-- 否则写个空占位  -->
					<template v-else>
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px`, width: '16.5px', height: '16.1px' }"></div>
					</template>
				</div>
			</div>
			<div class="cell cell2">
				<div class="tooth-item">
					<!-- <div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['upper-right']" :key="item.id">{{ item.displayId }}</div> -->
					<template v-if="sections['upper-right'].length">
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['upper-right']" :key="item.id">{{ item.displayId }}</div>
					</template>
					<template v-else>
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px`, width: '16.5px', height: '16.1px' }"></div>
					</template>
				</div>
			</div>
		</div>
		<div class="tooth-row">
			<div class="cell cell3">
				<div class="tooth-item end">
					<!-- <div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['lower-left']" :key="item.id">{{ item.displayId }}</div> -->
					<template v-if="sections['lower-left'].length">
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['lower-left']" :key="item.id">{{ item.displayId }}</div>
					</template>
					<template v-else>
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px`, width: '16.5px', height: '16.1px' }"></div>
					</template>
				</div>
			</div>
			<div class="cell cell4">
				<div class="tooth-item">
					<!-- <div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['lower-right']" :key="item.id">{{ item.displayId }}</div> -->
					<template v-if="sections['lower-right'].length">
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px` }" v-for="item in sections['lower-right']" :key="item.id">{{ item.displayId }}</div>
					</template>
					<template v-else>
						<div class="tooth-item-item" :style="{ margin: `0 ${margin}px`, fontSize: `${fontSize}px`, width: '16.5px', height: '16.1px' }"></div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted, watch } from 'vue';

	const props = defineProps({
		Tooth: { type: String, default: '' },
		text: { type: String, default: '' },
		margin: { type: Number, default: 2.5 },
		fontSize: { type: [Number, String], default: 14 },
		style: { type: Object, default: () => ({}) }
	});

	const sections = ref({ 'upper-left': [], 'upper-right': [], 'lower-left': [], 'lower-right': [] });

	const update = () => {
		const toothLabel = [0, 18, 17, 16, 15, 14, 13, 12, 11, 21, 22, 23, 24, 25, 26, 27, 28, 48, 47, 46, 45, 44, 43, 42, 41, 31, 32, 33, 34, 35, 36, 37, 38];
		const tooth = (props.Tooth || props.text).split(',').map(Number);

		const toothSections = {
			'upper-left': toothLabel.slice(1, 9),
			'upper-right': toothLabel.slice(9, 17),
			'lower-left': toothLabel.slice(17, 25),
			'lower-right': toothLabel.slice(25, 33)
		};

		for (const [sectionName, range] of Object.entries(toothSections)) {
			// sections.value[sectionName] = range.filter((id) => tooth.includes(id)).map((id) => ({ id, displayId: id }));
			sections.value[sectionName] = range.filter((id) => tooth.includes(id)).map((id) => ({ id, displayId: getTwoDigits(id) }));
		}
	};

	//去除两位数的十位上的数字
	const getTwoDigits = (num) => {
		if (num < 10) {
			return num;
		}
		//截取掉第一个数字
		return num.toString().slice(1);
	};

	onMounted(update);
	watch(() => [props.Tooth, props.text], update, { immediate: true });
</script>

<style lang="scss" scoped>
	.tooth {
		width: 200px;
		display: table;

		&-row {
			display: table-row;
		}

		.cell {
			display: table-cell;
		}

		.cell1,
		.cell2 {
			border-bottom: 1px dashed black;
			vertical-align: bottom;
		}

		.cell1,
		.cell3 {
			border-right: 1px dashed black;
		}

		&-item {
			display: flex;
			justify-content: flex-start;
			padding: 2px;

			&-item {
				margin: 0 2.5px;
			}
		}

		.end {
			justify-content: flex-end;
		}
	}
</style>
